<template>
  <div class="page">
    <!-- <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-button
            icon="iconfont iconpailie"
            :type="showPrimary('time1')"
            @click="rChangeSearchOrderBy('time1')"
            >提交人数排序</el-button
          >
        </el-form-item>
      </el-form>
    </div> -->

    <div class="c-main p20">
      <div class="c-aside clearfix">
        <el-button
          type="primary"
          class="fr btn"
          @click="rTriggerAddSettleStyle"
          v-hasAuth:seestar_channelAddSettleStyle
          >新增结算方式</el-button
        >
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column prop="nickName" label="平台">
              <template slot-scope="scope">
                <div class="">
                  {{ tranlate.platformTranlate[scope.row.platform] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="结算方式">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.cooperationMode }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="海报链接浏览次数(次)">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.count || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:seestar_channelClueDetail
                  @click="rDetail(scope.row.channelMaterialId)"
                  >详情</el-button
                >
                <span
                  v-hasAuth:seestar_channelClueDetail-seestar_channelClueEdit-seestar_actorClueStatusChange-seestar_delete.invert
                  >—</span
                >
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <!-- <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div> -->
      </div>
    </div>
    <!-- settleStyleDrawerCp -->
    <el-drawer
      :title="settleStyleDrawerCp.config.title"
      :visible.sync="settleStyleDrawerCp.config.visible"
      :direction="settleStyleDrawerCp.config.direction"
      :size="settleStyleDrawerCp.config.size"
    >
      <div class="f-settleStyleDrawerCp">
        <div class="n-content">
          <el-row type="flex" justify="center">
            <el-col :span="14" :offset="5">
              <el-form ref="status" label-width="150px">
                <el-form-item label="请选择平台：">
                  <el-select
                    v-model="settleStyleDrawerCp.data.platform"
                    placeholder="请选择平台"
                    @change="rPlatformOnChange"
                  >
                    <el-option
                      v-for="item in platformSettlementsSupAjax.data"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="请选择结算方式："
                  v-if="settleStyleDrawerCp.data.platform"
                >
                  <el-select
                    v-model="settleStyleDrawerCp.data.cooperationMode"
                    placeholder="请选择结算方式"
                  >
                    <el-option
                      v-for="item in alone.cooperationModeData"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="rSubmitCreateForm"
                    >确定</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getChannelSettlementsList,
  getChannelDetail,
  getPlatformSettlementsList,
  addSettleStyle
} from "@/api/channel.js";
import _ from "lodash";

export default {
  name: "seestar_channelSettleStyle",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    platformSettlementsSupAjax: {
      data: []
    },
    channelDetailSupAjax: {
      data: {}
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          channelId: ""
        }
      },
      cooperationModeData: []
    },
    tranlate: {
      platformTranlate: {}
    },
    settleStyleDrawerCp: {
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "90%"
      },
      data: {
        channelId: "",
        platform: "",
        cooperationMode: ""
      },
      backUpData: {
        channelId: "",
        platform: "",
        cooperationMode: ""
      }
    }
  }),
  created() {
    let _that = this;
    if (this.$route.query && this.$route.query.channelId > -1) {
      this.alone.searchForm.data.channelId = this.$route.query.channelId;
    }

    _that.getChannelDetailData().then(() => {
      _that.getPlatformSettlementsListData().then(() => {
        _that.getPageData();
      });
    });
  },
  methods: {
    rChangeSearchOrderBy(val) {
      this.alone.searchForm.data.orderBy = val;
    },
    showPrimary(val) {
      if (this.alone.searchForm.data.orderBy == val) {
        if (this.alone.searchForm.data.order == "desc") {
          return "success";
        } else {
          return "primary";
        }
      }
      return "default";
    },
    rTriggerAddSettleStyle() {
      this.settleStyleDrawerCp.config.visible = true;
      this.settleStyleDrawerCp.data = _.cloneDeep(
        this.settleStyleDrawerCp.backUpData
      );
      this.alone.cooperationModeData = [];
    },
    rPlatformOnChange(v) {
      let _that = this;
      let platformSettlementsSupAjaxData =
        _that.platformSettlementsSupAjax.data;
      let cooperationModeData = [];
      platformSettlementsSupAjaxData.forEach(item => {
        if (item.value == v) {
          cooperationModeData = item.cooperationTypes;
        }
      });

      _that.settleStyleDrawerCp.data.cooperationMode = "";
      _that.alone.cooperationModeData = cooperationModeData;
    },
    rSubmitCreateForm() {
      let _that = this;
      let settleStyleDrawerCpData = _that.settleStyleDrawerCp.data;

      if (_that.settleStyleDrawerCp.loading) {
        return;
      }

      if (!settleStyleDrawerCpData.platform) {
        _that.$message.error("平台不能为空");
        return;
      }
      if (!settleStyleDrawerCpData.cooperationMode) {
        _that.$message.error("合作方式不能为空");
        return;
      }
      _that.settleStyleDrawerCp.loading = true;
      settleStyleDrawerCpData.channelId = _that.$route.query.channelId;
      addSettleStyle(settleStyleDrawerCpData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "获取失败");
            this.settleStyleDrawerCp.config.visible = false;
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.settleStyleDrawerCp.loading = false;
        });
    },

    rPagingChange(e) {
      let _that = this;
      _that.vewCountByDate.paging.current = e - 1;
      _that.getVewCountByDateData();
    },

    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getChannelSettlementsList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getPlatformSettlementsListData() {
      let _that = this;
      let channelDetailSupAjaxData = _that.channelDetailSupAjax.data;
      return getPlatformSettlementsList()
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            let platformTranlate = {};
            let arr = respData.data.filter(item => {
              platformTranlate[item.value] = item.name;
              if (item.type == channelDetailSupAjaxData.type) {
                if (channelDetailSupAjaxData.subType) {
                  if (item.subType == channelDetailSupAjaxData.subType) {
                    return item;
                  }
                } else {
                  return item;
                }
              }
            });
            _that.platformSettlementsSupAjax.data = arr;
            _that.tranlate.platformTranlate = platformTranlate;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally();
    },
    getChannelDetailData() {
      let _that = this;

      return getChannelDetail({
        params: { channelId: _that.$route.query.channelId }
      }).then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.channelDetailSupAjax.data = respData.data;
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },

    rToUrl() {
      this.$router.push({ name: "seestar_create" });
    },
    navToEdit(id) {
      this.$router.push({
        name: "seestar_channelClueEdit",
        query: {
          anchorId: id
        }
      });
    },
    navToDetail(id) {
      this.$router.push({
        name: "seestar_channelClueDetail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-record {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
  }
  .f-settleStyleDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
